// This file is part of OpenMediaVault.
//
// @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
// @author    Volker Theile <volker.theile@openmediavault.org>
// @copyright Copyright (c) 2009-2023 Volker Theile
//
// OpenMediaVault is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// OpenMediaVault is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
@use "sass:color";
@use 'scss/defaults/colors' as dc;
@use 'scss/defaults/variables' as dv;
@use 'scss/theme';

.omv-login-page {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .background {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: dc.$omv-color-corporate-light;
    content: url('^./assets/images/benjamin-lehman-GNyjCePVRs8-unsplash.jpg');
    mix-blend-mode: multiply;

    // animation-name: ken-burns-top-left;
    // animation-duration: 20s;
    // animation-iteration-count: 3;
    filter: hue-rotate(175deg);
    object-fit: cover;
  }

  omv-green-rain {
    position: absolute;
    font-family: theme.$omv-font-family-monospace !important;
    font-size: 14px;
    width: 100%;
    height: 100%;
  }

  .toolbar {
    width: 100%;
    height: 100%;
    position: absolute;

    mat-toolbar {
      background-color: dc.$omv-color-transparent;
    }
  }

  .sidebar {
    background-color: dc.$omv-color-black-translucent;
    width: 6rem;
    height: 100%;
    position: absolute;

    .logo {
      content: url('^./assets/images/openmediavault_logo.svg');
      margin: dv.$omv-margin;
      width: auto;
      height: auto;
      transform-origin: top right;
      transform: translateX(-100%) rotate(-90deg);
    }
  }

  .content {
    width: 100%;
    height: 100%;

    omv-intuition-form-page {
      height: 100%;

      ::ng-deep .mat-card {
        color: dc.$omv-color-white;
        backdrop-filter: blur(4px);
        background-color:
          hsla(
            color.hue(dc.$omv-color-corporate-default),
            color.saturation(dc.$omv-color-corporate-default),
            color.lightness(dc.$omv-color-corporate-default),
            40%
          );

        .mat-form-field {
          .mat-input-element {
            caret-color: theme.$omv-color-primary;
          }

          .mat-form-field-label,
          .mat-hint {
            color: dc.$omv-color-white;
          }

          .mat-form-field-underline {
            background-color: dc.$omv-color-white;
          }

          .mat-form-field-ripple {
            background-color: theme.$omv-color-primary;
          }

          &.mat-form-field-invalid {
            .mat-input-element {
              caret-color: theme.$omv-color-error;
            }

            .mat-form-field-label {
              color: theme.$omv-color-error;
            }

            .mat-form-field-ripple {
              background-color: theme.$omv-color-error;
            }
          }

          .mat-form-field-suffix .mat-icon,
          .mat-form-field-prefix .mat-icon {
            color: dc.$omv-color-white;
          }
        }
      }
    }
  }
}

// @keyframes ken-burns-top-left {
//   0% {
//     opacity: 0;
//   }
//
//   5% {
//     opacity: 1;
//   }
//
//   95% {
//     animation-timing-function: ease-in-out;
//     opacity: 1;
//     transform: scale3d(1.5, 1.5, 1) translate3d(-20px, -15px, 0);
//     transform-origin: top left;
//   }
//
//   100% {
//     opacity: 0;
//     transform: scale3d(2, 2, 1) translate3d(-20px, -15px, 0);
//     transform-origin: top left;
//   }
// }
